<template>
    <div class="home">
        <block-loading :loading="blockLoading">
            <van-row type="flex" justify="space-between" class="banner">
                <van-image class="banner_left" :src="require('@/assets/images/bg_banner_left_run_r.png')"/>
                <van-image class="text_img" :src="require('@/assets/images/bg_banner_text.png')"/>
            </van-row>
            <div class="order_container panel">
                <div class="order_bar panel">
                    <h2 class="title">我的订单</h2>
                    <span class="info">数量：{{orderTotal}}</span>
                </div>
                <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        :immediate-check='false'
                        @load="getOrderList">
                    <div class="order_item panel" v-for="item in orderList">
                        <router-link :to="{path:'/order_detail',query:item}">
                            <p><label>订单号：</label><span>{{item.order_number}}</span></p>
                            <p><label>支付时间：</label><span>{{item.pay_time}}</span></p>
                            <p><label>支付金额：</label><span class="red">&yen;{{item.money}}</span></p>
                            <p><label>定制内容：</label><span>{{item.class_num}}个班+每周{{item.course}}节课</span></p>
                        </router-link>
                        <p class="serve">
                            <label>服务码：</label>
                            <span>{{item.serve_code*1||'--'}}</span>
                            <van-button  v-if="item.serve_code*1"  class="check_serve_btn" @click="checkServeHandle(item.serve_code)" type="warning" plain hairline size="mini">查看服务商
                            </van-button>
                        </p>
                        <p class="serve">
                            <label>实际服务码：</label>
                            <span>{{item.actual_serve_code*1||'--'}}</span>
                            <van-button v-if="item.actual_serve_code*1" class="check_serve_btn" @click="checkServeHandle(item.actual_serve_code)" type="warning" plain hairline size="mini">查看服务商
                            </van-button>
                        </p>
                        <font class="sign success" v-if="item.state==1">完成</font>
                        <font class="sign" v-if="item.state==0">过期</font>

                    </div>
                </van-list>
            </div>
        </block-loading>
        <van-dialog v-model="showServe" title="服务商信息">
            <div class="serve_content">
                <p><label>联系方式：</label><b>{{serveInfo.username}}</b></p>
                <p><label>姓名：</label><b>{{serveInfo.name}}</b></p>
                <p><label>机构名称：</label><b>{{serveInfo.institution_name}}</b></p>
            </div>
        </van-dialog>
    </div>
</template>

<script>
// @ is an alias to /src
import $api from "@/api/index"
export default {
  name: "orderList",
  components: {},
  filters: {
    setLabel(value, ArrayObj) {
      const i = ArrayObj.findIndex(item => item.value === value)
      return ArrayObj[i].label
    }
  },
  data() {
    return {
      showServe: false,
      serveInfo: {
        username: '',
        name: '',
        institution_name: ''
      },
      loading: false,
      finished: false,
      orderList: [],
      orderTotal: '',
      addOrUpdateVisible: false,
      btnLoading: false,
      blockLoading: false,
      page: 1,
      size: 10
    };
  },
  created(){
    this.getOrderList()
  },
  methods: {
    // 获取班级列表
    getOrderList(){
      if (this.orderList.length === this.orderTotal) {
        this.finished = true;
        return;
      }
      let page = this.page++
      $api.order.getOrderList({page, size: this.size}).then(res => {
        this.orderTotal = res.data.count
        this.orderList = [...this.orderList, ...res.data.list];
        //因为到了最底部，load事情会将 loading变为true，但是数据没加载完，所以要重新改为false
        this.loading = false;
      })
    },
    // 新增 / 修改
    addOrUpdateHandle(record) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(record)
      })
    },
    //查看服务商信息
    checkServeHandle(serve_code){
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      });
      $api.user.getServeInfo({serve_code}).then(res => {
        this.showServe =true
        this.serveInfo = res.data
      }).finally(res=>{
        this.$toast.clear();
      })
    }

  },
};
</script>
<style lang="scss" scoped>
    ::v-deep {
        .banner {
            overflow: hidden;
            .banner_left {
                width: 344px;
                height: 298px;
                margin-top: 18px;
                margin-left: 27px;
            }
        }
        .order_container {
            width: 690px;
            box-sizing: border-box;
            margin: -17px auto 0;
            position: relative;
            z-index: 10;
            .panel {
                background-color: #fff;
                box-shadow: 0px 2px 9px 0px rgba(51, 51, 51, 0.1);
                border-radius: 10px;
                overflow: hidden;
                padding: 0 30px;
            }
            .order_bar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                line-height: 80px;
                margin-bottom: 10px;
                .title {
                    margin: 0;
                    width: 112px;
                    font-size: 28px;
                    font-weight: bold;
                    color: #333333;
                }
                .info {
                    color: #999;
                    font-size: 26px;
                }
            }
            .order_item {
                margin-bottom: 20px;
                padding: 20px 30px;
                position: relative;
                p {
                    display: flex;
                    align-items: center;
                    font-size: 28px;
                    margin: 0;
                    line-height: 50px;
                    & > label {
                        color: #212121;
                    }
                    & > span {
                        color: #8A8A8A;
                    }
                    .red {
                        color: #FF3535 !important;
                    }
                    .check_serve_btn {
                        font-size: 22px;
                        border-radius: 5px;
                        margin-left: 20px;
                    }
                    &.serve {
                        margin-top: 12px;
                    }
                }
                .sign {
                    position: absolute;
                    width: 150px;
                    height: 45px;
                    line-height: 45px;
                    border-radius: 10px;
                    color: #fff;
                    font-size: 25px;
                    text-align: center;
                    top: 8px;
                    background: #ccc;
                    right: -45px;
                    transform-origin: center center;
                    transform: rotate(45deg);
                    &.success {
                        background: #FFD764;
                    }
                }
            }
        }
    }
</style>
